<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>共享样式</title>
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/share.css">
<link rel="stylesheet" type="text/css" href="css/list.css">
<link rel="stylesheet" type="text/css" href="css/demostyle.css">
</head>

<body>
<div class="demobox">
	<div class="h3">关闭 × </div>
	<button type="button" class="fn-close" aria-hidden="true">×</button>
    
    <div class="h3">注释说明盒子</div>
    
    <div class="bl-notes bl-notes-danger">
    	论文注释（Notes）：论文可以有适量、适当的论文注释，用以注明所引资料的来 源，或表达作者对文中某观点、某概念等的补充说明。
    </div>
    <div class="bl-notes bl-notes-warning">
    	论文注释（Notes）：论文可以有适量、适当的论文注释，用以注明所引资料的来 源，或表达作者对文中某观点、某概念等的补充说明。
    </div>
    <div class="bl-notes bl-notes-info">
    	论文注释（Notes）：论文可以有适量、适当的论文注释，用以注明所引资料的来 源，或表达作者对文中某观点、某概念等的补充说明。
    </div>
    
    <div class="h3">背景颜色</div>
    <div class="bg-muted">bg-muted</div>
    <div class="bg-primary">bg-primary</div>
    <div class="bg-warning">bg-warning</div>
    <div class="bg-danger">bg-danger</div>
    <div class="bg-error">bg-error</div>
    <div class="bg-info">bg-info</div>
    <div class="bg-success">bg-success</div>
    
    <div class="h3">文本颜色</div>
    <div class="t-muted">t-muted</div>
    <div class="t-primary">t-primary</div>
    <div class="t-warning">t-warning</div>
    <div class="t-danger">t-danger</div>
    <div class="t-error">t-error</div>
    <div class="t-info">t-info</div>
    <div class="t-success">t-success</div>
    
    <div class="h3">进度条<small>可以追加 bl-progress-striped 产生斜线纹理</small></div>
    <div class="bl-progress">
        <div style="width:40%" class="bl-progress-bar"><span class="bl-progress-num">40% bl-progress</span></div>
    </div>
    <br/>
    <div class="bl-progress">
        <div style="width:40%" class="bl-progress-bar progress-bar-success"><span class="bl-progress-num">40% progress-bar-success</span></div>
    </div>
    <br/>
    <div class="bl-progress">
        <div style="width:40%" class="bl-progress-bar progress-bar-warning"><span class="bl-progress-num">40% progress-bar-warning</span></div>
    </div>
    <br/>
    <div class="bl-progress">
        <div style="width:40%" class="bl-progress-bar progress-bar-danger"><span class="bl-progress-num">40% progress-bar-warning</span></div>
    </div>
    <br/>
    <div class="bl-progress">
        <div style="width:40%" class="bl-progress-bar progress-bar-info"><span class="bl-progress-num">40% progress-bar-warning</span></div>
    </div>
    <br/>
    <div class="bl-progress">
        <div style="width:40%" class="bl-progress-bar"><span class="bl-progress-num">40% bl-progress</span></div>
        <div style="width:30%" class="bl-progress-bar progress-bar-success"><span class="bl-progress-num">30% progress-bar-success</span></div>
        <div style="width:10%" class="bl-progress-bar progress-bar-danger"><span class="bl-progress-num">10% progress-bar-warning</span></div>
    </div>
    
    <div class="h3">tip盒子<small>上下左右尖角</small></div>

    <div class="bl-tip-box tip-skin-gray" style="display:block; position:relative">
        <div class="J-box TJ-box"><span class="J"></span><i class="J"></i></div>
        <div class="bl-tip-con cktip" style="display:block">不能为空</div>
    </div>
    <br/>
    <div class="bl-tip-box tip-skin-blue" style="display:block; position:relative">
        <div class="J-box BJ-box"><span class="J"></span><i class="J"></i></div>
        <div class="bl-tip-con cktip" style="display:block">不能为空</div>
    </div>
    <br/>
    <div class="bl-tip-box tip-skin-def" style="display:block; position:relative">
        <div class="J-box LJ-box"><span class="J"></span><i class="J"></i></div>
        <div class="bl-tip-con cktip" style="display:block">不能为空</div>
    </div>
    <br/>
    <div class="bl-tip-box tip-skin-def" style="display:block; position:relative">
        <div class="J-box RJ-box"><span class="J"></span><i class="J"></i></div>
        <div class="bl-tip-con cktip" style="display:block">不能为空</div>
    </div>
    
</div>
</body>
</html>
